var React=require('react');
var ReactDOM=require('react-dom');

var Content=React.createClass({
	//初始化状态
	getInitialState:function(){
		var list=[];
		if(localStorage){
			for(var i=0;i<localStorage.length;i++){
			var temp=localStorage.getItem(localStorage.key(i));
				list.push(temp);
			}
		}
		 return {
                    list: list
          }		
	},
	sendPinglun:function(){
		var username=this.refs.username.value;
		var content=this.refs.content.value;
		var obj={
			username:username,
			content:content
		}
		console.log(obj);
		var listData=this.state.list;
		listData.push(obj);
		this.setState({
			list:listData
		})
		localStorage.setItem(username,JSON.stringify(obj))
	},
	render:function(){
		return(
			<div>
				 <TodoList list={this.state.list} />
				<div>
					用户名：<input type="text" ref="username"/>
				</div>
				<div>
					<textarea rows="6" cols="8" ref="content"></textarea>
				</div>
				<button onClick={this.sendPinglun}>评论</button>
			</div>
		)
	}
})

var TodoList=React.createClass({
	//console.log(this.props.list);
	render:function(){
		return(
			<ul>{
				this.props.list.map(function(item){
					return(
						<dl>
							<dt>{item.username}</dt>
							<dd>{item.content}</dd>
						</dl>
					) 											
				})
				}
			</ul>
		)
	}
})

 ReactDOM.render(
       <Content />,
       document.querySelector('#box')
   )
